<template>
  <div class="draggable-table-container">
    <a-table
      :columns="columns"
      :data-source="tableData"
      rowKey="id"
      :components="components"
      @change="handleTableChange"
    >
      <template #customRender="{ column, record }">
        <template v-if="column.key === 'drag'">
          <DragOutlined class="drag-handle" />
        </template>
        <template v-if="column.key === 'name'">
          <Input
            v-model="record.name"
            @change="(e) => handleInputChange(record.id, 'name', e.target.value)"
          />
        </template>
        <template v-if="column.key === 'age'">
          <InputNumber
            v-model="record.age"
            :min="0"
            @change="(value) => handleInputChange(record.id, 'age', value)"
          />
        </template>
        <template v-if="column.key === 'address'">
          <Input
            v-model="record.address"
            @change="(e) => handleInputChange(record.id, 'address', e.target.value)"
          />
        </template>
        <template v-if="column.key === 'selected'">
          <Checkbox
            v-model="record.selected"
            @change="(checked) => handleInputChange(record.id, 'selected', checked)"
          />
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup>
import { ref, h } from 'vue';
import { DragOutlined } from '@ant-design/icons-vue';
import draggable from 'vuedraggable';
import { Table, Input, InputNumber, Checkbox } from 'ant-design-vue';

// 表格数据
const tableData = ref([
  { id: 1, name: '张三', age: 18, address: '北京市', selected: false },
  { id: 2, name: '李四', age: 22, address: '上海市', selected: false },
  { id: 3, name: '王五', age: 25, address: '广州市', selected: false },
  { id: 4, name: '赵六', age: 30, address: '深圳市', selected: false },
]);

// 表格列配置
const columns = ref([
  {
    title: '拖拽',
    key: 'drag',
    width: 80,
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '选择',
    dataIndex: 'selected',
    key: 'selected',
  },
]);

// 处理输入框和复选框变化
const handleInputChange = (id, field, value) => {
  const index = tableData.value.findIndex(item => item.id === id);
  if (index!== -1) {
    tableData.value[index][field] = value;
  }
};

// 处理表格变化
const handleTableChange = (pagination, filters, sorter) => {
  console.log('表格变化:', pagination, filters, sorter);
};

// 自定义表格组件，用于集成拖拽功能
const DraggableWrapper = (props) => {
  return h(draggable, {
    modelValue: tableData.value,
    'onUpdate:modelValue': (newValue) => {
      tableData.value = newValue;
    },
    animation: 300,
    handle: '.drag-handle',
    class: 'draggable-container',
    itemKey: 'id',
    ...props.attrs
  }, {
    // 提供 item 插槽
    item: ({ element }) => h(
      'tr',
      { key: element.id },
      // 检查 props.children 是否存在，若不存在则使用空数组
      (props.children || []).map(child => {
        if (typeof child.type === 'object' && child.type.__name === 'ATableBodyRow') {
          return h(child.type, {
            ...child.props,
            record: element
          }, child.children);
        }
        return child;
      })
    )
  });
};

const components = {
  body: {
    wrapper: DraggableWrapper
  }
};
</script>

<style scoped>
.draggable-table-container {
  padding: 20px;
}

.drag-handle {
  cursor: move; /* 鼠标悬停时显示拖拽图标 */
  color: #666;
  font-size: 18px;
}

/* 拖拽过程中表格行的样式 */
.ant-table-row.dragging {
  background-color: #f0f9ff !important;
  border: 1px dashed #409eff !important;
}
</style>
